<template>
  <div>
    <div class="d1">
      <p>匿名插槽</p>
      <Index>
        <span>我是匿名插槽</span>
      </Index>
    </div>
    <div class="d1">
      <p>具名插槽</p>
      <Index>
        <template #title>我是具名插槽</template>
      </Index>
    </div>
    <div class="d1">
      <p>作用域插槽</p>
      <Index>
        <template #footer="{ scope }">
          <footer>我是作用域插槽--名字：{{scope.name}}、年龄：{{scope.age}}</footer>
        </template>
      </Index>
    </div>
  </div>
</template>

<script setup>
// import { reactive, ref, toRefs } from 'vue';
import Index from '../../components/sanDianEr/插槽slot/index.vue'

</script>
<style scoped lang ='less'>
.d1 {
  width: 80%;
  height: 100px;
  margin: 10px auto;
  border: 1px solid #000;
}
</style>